<template>
  <div class="index">
    <NavBar />
    <div class="container">
      <div v-if="showView">
        <div class="index-top" v-if="viewData.recommendList.length">
          <div class="w29 big-img">
            <a href="javascript:void(0)" @click="$router.push('/articleDetails/'+viewData.recommendList[0].viewPointId)" :title="viewData.recommendList[0].title"><img :src="viewData.recommendList[0].imgUrl">
              <i class="mask"></i>
            </a>
            <span class="tip">
              <a href="javascript:void(0)" class="title ftz16">{{viewData.recommendList[0].title}}</a>
              <p>
                <span>{{viewData.recommendList[0].author}}</span>
                <span>{{ viewData.recommendList[0].updateTime | parseTime('{y}-{m}-{d}')}}</span>
                <a href="javascript:void(0)" @click="$router.push('/qa')" class="fr">
                  <img src="../../assets/res/img/icon_ques.png">
                  <span>向他提问</span>
                </a>
              </p>
            </span>
            <div class='info width-100'>
              <div class="photo">
                <a href="javascript:void(0)" @click="linkToDashboard(viewData.recommendList[0].userId)" class="photo-level">
                  <img :src="viewData.recommendList[0].avatar">
                  <span :class="[`level`,`level_${item.recommendList[0].authType}`,`mini`]"></span>
                </a>
                <div class="badge"><img src="../../assets/res/img/icon_appr.png"></div>
              </div>
              <div class="intro">
                <a href="javascript:void(0)" @click="$router.push('/articleDetails/'+viewData.recommendList[0].viewPointId)" class="ftz16">{{viewData.recommendList[0].author}}</a>
                <p v-html="viewData.recommendList[0].userDesc"></p>
              </div>
            </div>
            <div class="index-t-l" :title="viewData.recommendList[0].classifyName">{{viewData.recommendList[0].classifyName}}</div>
          </div>
          <div class="fr w67">
            <div class="w30 sml-img" v-if="index>0&&index<7" v-for="(item, index) in viewData.recommendList" :key="index" :class="{'mrr4':index !==3&&index!==6, 'mrt30':index>3 }">
              <a href="javascript:void(0)" @click="$router.push('/articleDetails/'+item.viewPointId)" :title="item.title">
                <img :src="item.imgUrl">
                <i class="mask"></i>
              </a>
              <span class="tip">
                <a href="javascript:void(0)" class="title ftz16">{{item.title}}</a>
                <p>
                  <span>{{item.author}}</span>
                  <span>{{ item.updateTime | parseTime('{y}-{m}-{d}')}}</span>
                  <a href="javascript:void(0)" class="fr">
                    <img src="../../assets/res/img/icon_ques.png">
                    <span>向他提问</span>
                  </a>
                </p>
              </span>
              <div class="index-t-l" :title="item.classifyName">{{item.classifyName}}</div>
            </div>
          </div>
        </div>
        <div class="w73 inline item index-lf">
          <div class="item-h layui-nav" lay-filter>
            <a href="javascript:void(0)" :class="{'layui-this': tagView === 'recommend'}" @click="changeClassfy('recommend')" class="layui-nav-item ftz16">推荐</a>
            <a href="javascript:void(0)" v-if="userId" :class="{'layui-this': tagView === 'attention'}" @click="changeClassfy('attention')" class="layui-nav-item ftz16">关注</a>
            <a href="javascript:void(0)" :class="{'layui-this': tagView === item.classifyId}" @click="changeClassfy(item.classifyId)" class="layui-nav-item ftz16" v-for="(item, index) in viewData.classifyList" :key="index">{{item.classifyName}}</a>
          </div>
          <div class="con">
            <ul list>
              <li class="width-100" v-for="(item, index) in articleList" :key="index">
                <router-link v-if="item.imgUrl" class="images" :title="item.title" :to="{name:'articleDetails', params: {id: item.viewPointId}}">
                  <img :src="item.imgUrl">
                </router-link>
                <div class="info" :class="{'fr': item.imgUrl}">
                  <router-link class="title ftz18" :title="item.title" :to="{name:'articleDetails', params: {id: item.viewPointId}}">
                    {{item.title}}
                  </router-link>
                  <router-link class="txt" :title="item.title" :to="{name:'articleDetails', params: {id: item.viewPointId}}">
                    {{item.summary}}
                  </router-link>
                  <div class="tip">
                    <span class="photo photo-level">
                      <img style="cursor:pointer;" @click="linkToDashboard(item.userId)" :src="item.avatar">
                      <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                    </span>
                    <span>{{item.author}}</span>
                    <span class="line"></span>
                    <span>{{ item.updateTime | parseTime('{y}-{m}-{d}')}}</span>
                    <span class="line"></span>
                    <span>阅读量：{{item.hot}}</span>
                    <span class="line"></span>
                    <span :title="item.classifyName">分类：{{item.classifyName}}</span>
                  </div>
                </div>
              </li>
              <div v-if="total>articleList.length" @click="loadMore()" class="load-more" id="list_more">
                <button>查看更多</button>
              </div>
            </ul>
            <div v-if="!total&&!loading" style="padding: 40px;text-align: center;font-size: 16px;color: #999;">
              暂无内容
            </div>
          </div>
        </div>
        <div class="index-r fr w23">
          <div class="hot-p item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">热门观点</b>
            </div>
            <div class="con">
              <ul class="width-100">
                <li class="width-100" @click="$router.push('/articleDetails/'+item.viewPointId)" v-for="(item, index) in viewData.hotViewPointList" :key="index">
                  <i>{{index+1}}</i>
                  <a href="javascript:void(0)" class="title fr">{{item.title}}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="idea item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">意见领袖</b>
              <a href="javascript:void(0)" @click="$router.push('/superior')" class="fr">更多></a>
            </div>
            <div class="con">
              <ul>
                <li v-for="(item, index) in viewData.opinionLeaderList" :key="index">
                  <div class="photo">
                    <a href="javascript:void(0)" @click="linkToDashboard(item.userId)" class="images photo-level">
                      <img :src="item.headImg">
                      <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                    </a>
                    <button @click="modifyUserFocusEvent(item)">{{item.isMyFocus === '0'?'已关注':'+关注'}}</button>
                  </div>
                  <div class="info fr">
                    <a href="javascript:void(0)" @click="linkToDashboard(item.userId)" class="name ftz16">{{item.authName}}</a>
                    <span class="line" v-if="item.authType === '1'"></span>
                    <span v-if="item.authType === '1'">{{item.orgName}}</span>
                    <p>{{item.descreption}}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import * as api from '@/service/api'
import { mapState } from 'vuex'
export default {
  components: {
    NavBar,
    Footer
  },
  data () {
    return {
      viewData: {},
      total: null,
      tagView: 'recommend',
      searchData: {
        locationLevel: '0',
        classifyId: '',
        pageSize: 10,
        pageNum: 1,
        type: '0',
        status: '0'
      },
      showView: false,
      articleList: [],
      layerLoad: null,
      loading: false
    }
  },
  created () {
    this.getViewpintInfo()
    this.getArticleList()
  },
  mounted () {
    if (window.layer) {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    ...mapState({
      userInfo: state => state.me.sysUser || {}
    }),
    curRoute () {
      return this.$route.path
    }
  },
  methods: {
    changeClassfy (key) {
      this.searchData.locationLevel = ''
      this.searchData.pageNum = 1
      this.searchData.classifyId = ''
      this.searchData.type = ''
      if (key === 'recommend') {
        this.tagView = 'recommend'
        this.searchData.locationLevel = '0'
        this.searchData.type = '0'
        this.getArticleList()
      } else if (key === 'attention') {
        this.tagView = 'attention'
        this.getAttentionArticleList()
      } else {
        this.tagView = key
        this.searchData.classifyId = key
        this.getArticleList()
      }
    },
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      if (this.tagView === 'attention') {
        this.getAttentionArticleList()
      } else {
        this.getArticleList()
      }
    },
    modifyUserFocusEvent (item) {
      let eventName = item.isMyFocus === '0' ? '取消关注' : '关注'
      if (!this.userId) {
        window.layui.layer.msg('请登录后再' + eventName + '！')
        return false
      }
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认' + eventName + '吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.modifyUserFocus(item)
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    linkToDashboard (itemId) {
      if (this.userId === itemId) {
        if (this.userInfo.authType === '0') {
          this.$router.push('/dashboardUser')
        } else {
          this.$router.push('/dashboardAuth')
        }
      } else {
        this.$router.push('/dashboard/live/' + itemId)
      }
    },
    async modifyUserFocus (item) {
      await api.modifyUserFocus({
        focusUserId: item.userId,
        focusStatus: item.isMyFocus === '0' ? '1' : '0'
      })
      this.getViewpintInfo()
    },
    async getArticleList () {
      let res = await api.getArticleList({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.articleList = res.data.data.list
      } else {
        this.articleList = this.articleList.concat(res.data.data.list)
      }
      this.total = res.data.data.total
      this.$nextTick(() => {
        window.layer.close(this.layerLoad)
      })
    },
    async getAttentionArticleList () {
      let res = await api.getAttentionArticleList({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.articleList = res.data.data.list
      } else {
        this.articleList = this.articleList.concat(res.data.data.list)
      }
      this.total = res.data.data.total
      this.$nextTick(() => {
        if (window.layer) {
          window.layer.close(this.layerLoading)
        }
      })
    },
    async getViewpintInfo () {
      let res = await api.getViewpintInfo({ siteId: this.siteId })
      this.viewData = res.data.data
      this.showView = true
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/point";
</style>
